<template>
    <div class="pop-project-filling">
        <div class="box-data" v-if="priceData && porjectData">
            <div class="project-info">
                <div class="img-box">
                    <img
                        :src="
                            porjectData.imgs_share
                                ? porjectData.imgs_share
                                : img_buf
                        "
                    />
                </div>
                <div class="info-box">
                    <div class="title">
                        <span>{{ porjectData.title }}</span>
                    </div>
                    <div class="phone">
                        <span>{{ porjectData.gd_brand }}</span>
                    </div>
                    <div class="tiem">
                        <span>{{ porjectData.price }}</span>
                    </div>
                </div>
            </div>
            <div
                class="project-info price-pre"
                v-if="
                    priceData &&
                    priceData.price_pre &&
                    priceData.gd_price[0].psort == 0
                "
            >
                <span
                    >上次：{{
                        `${priceData.price_pre.atime_txt} ${priceData.price_pre.price} * ${priceData.price_pre.number}`
                    }}</span
                >
            </div>
            <div class="form-box">
                <el-form ref="fillingForm" :model="fillingForm" :rules="rules">
                    <div class="flx-box">
                        <el-form-item>
                            <el-select
                                v-model="fillingForm.price_type"
                                class="width-left"
                                @change="selectPriceFun"
                            >
                                <el-option
                                    v-for="item in priceData.gd_price"
                                    :key="item.psort"
                                    :label="item.title"
                                    :value="item.psort"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="form-item" prop="price">
                            <el-input
                                v-model="fillingForm.price"
                                placeholder="请输入服务价格"
                            ></el-input>
                        </el-form-item>
                        <div class="unit">{{ porjectData.unit_title }}</div>
                    </div>
                    <div class="flx-box">
                        <div class="width-left title">折扣</div>
                        <el-form-item class="form-item" prop="discount_r">
                            <el-input
                                v-model="fillingForm.discount_r"
                                placeholder="请输入折扣"
                            ></el-input>
                        </el-form-item>
                        <div class="unit">%</div>
                    </div>
                    <div class="flx-box">
                        <div class="width-left title">数量</div>
                        <el-form-item class="form-item" prop="number">
                            <el-input
                                v-model="fillingForm.number"
                                placeholder="请输入数量"
                            ></el-input>
                        </el-form-item>
                        <div class="unit">{{ porjectData.unit_title }}</div>
                    </div>
                    <div class="flx-box" v-if="porjectData.outday_ls">
                        <div class="width-left title">有效期</div>
                        <el-form-item class="form-item">
                            <el-select
                                v-model="fillingForm.outday"
                                placeholder="请选择有效期"
                                class="select-w"
                            >
                                <el-option
                                    v-for="item in porjectData.outday_ls"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flx-box" v-if="porjectData.cost_ls">
                        <el-form-item>
                            <el-select
                                v-model="fillingForm.cost_title"
                                class="width-left"
                                @change="selectCostFun"
                            >
                                <el-option
                                    v-for="item in porjectData.cost_ls"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.title"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="form-item" prop="cost">
                            <el-input
                                v-model="fillingForm.cost"
                                placeholder="请输入服务成本"
                            ></el-input>
                        </el-form-item>
                        <div class="unit">{{ porjectData.unit_title }}</div>
                    </div>
                    <div class="flx-box">
                        <div class="width-left title">备注</div>
                        <el-form-item class="form-item">
                            <el-input
                                v-model="fillingForm.txt"
                                placeholder="请输入备注信息(200字内)"
                                type="textarea"
                                maxlength="200"
                                show-word-limit
                            ></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <div class="num">
                    <span>数量：{{ this.fillingForm.number }}</span
                    ><span>总额：{{ getTotal || 0 }}</span>
                </div>
                <div class="but">
                    <el-button @click="cancelFun" v-if="!is_details"
                        >取 消</el-button
                    >
                    <el-button type="danger" @click="emptyFilling"
                        >清 空</el-button
                    >
                    <el-button type="primary" @click="determineFilling"
                        >确 定</el-button
                    >
                </div>
            </span>
        </div>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import config from "@/js/conf/Config.js";

export default {
    name: "popProjectFilling",
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            fillingForm: {
                price_type: "",
                price: "",
                discount_r: "100",
                cost_title: "",
                cost: "",
                txt: "",
                outday: "",
                number: "1",
            },
            is_details: false,
            parameter: {},
            customerid: "",
            porjectData: null,
            priceData: null,
            rules: {
                price: [
                    {
                        required: true,
                        message: "请输入服务价格",
                        trigger: "blur",
                    },
                    {
                        pattern: /^\d+(.\d{1,2})?$/,
                        message: "请输入数字，支持俩位小数点",
                        trigger: "blur",
                    },
                ],
                discount_r: [
                    {
                        required: true,
                        message: "请输入百分比折扣",
                        trigger: "blur",
                    },
                    {
                        pattern: /^(?:0|[1-9][0-9]?|100)(\.[0-9]{0,2})?$/,
                        message: "请输入0-100的数字",
                        trigger: "blur",
                    },
                ],
                number: [
                    {
                        required: true,
                        message: "请输入服务数量",
                        trigger: "blur",
                    },
                    {
                        pattern: /^\+?[1-9][0-9]*$/,
                        message: "请输入整数且大于0",
                        trigger: "blur",
                    },
                ],
                cost: [
                    {
                        required: true,
                        message: "请输入服务成本",
                        trigger: "blur",
                    },
                    {
                        pattern: /^\d+(.\d{1,2})?$/,
                        message: "请输入数字，支持俩位小数点",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    computed: {
        getTotal() {
            let total = 0;
            total =
                this.fillingForm.number *
                this.fillingForm.price *
                (this.fillingForm.discount_r * 0.01);
            total = total.toFixed(2);
            return total;
        },
    },
    methods: {
        async initData(data, type, is_details = false) {
            this.is_details = is_details;
            this.customerid = data.customerid;
            this.parameter = data.porjectData;
            this.emptyData();
            await this.getPriceinfo();
            await this.getprojectinfo();
            if (type == 1) {
                this.fillingForm = Object.assign(
                    this.fillingForm,
                    data.fillingForm
                );
                if (this.is_details) {
                    this.fillingForm.price = data.fillingForm.price_0;
                    if (this.porjectData.outday_ls) {
                        this.porjectData.outday_ls.map((v) => {
                            if (
                                v.num == data.fillingForm.outday_num &&
                                v.unit == data.fillingForm.outday_unit
                            ) {
                                this.fillingForm.outday = v.id;
                            }
                        });
                    }
                }
            }
        },
        // 获取总额

        // 取消
        cancelFun() {
            this.$emit("cancelFun");
        },
        // 清空
        async emptyFilling() {
            this.$confirm("确认清空当前填写的内容?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.emptyData();
                    await this.getPriceinfo();
                    await this.getprojectinfo();
                })
                .catch(() => {});
        },
        // 确定
        determineFilling() {
            if (this.fillingForm.discount_r > 100) {
                this.$msg({ title: "折扣不能大于100" });
                return;
            }
            this.$refs.fillingForm.validate((valid) => {
                if (valid) {
                    let fillingData = {
                        cost: this.fillingForm.cost,
                        cost_title: this.fillingForm.cost_title,
                        discount_r: this.fillingForm.discount_r,
                        gdid: this.parameter.id,
                        id: "",
                        isChangePriceId: false,
                        number: this.fillingForm.number,
                        price: this.fillingForm.price,
                        price_0: this.fillingForm.price,
                        price_i: this.fillingForm.price_type,
                        randstr: this.getRandomSixDigit(),
                        txt: this.fillingForm.txt,
                        unitid: "0",
                    };
                    if (this.porjectData.outday_ls) {
                        this.porjectData.outday_ls.map((v) => {
                            if (v.id == this.fillingForm.outday) {
                                fillingData.outday_num = v.num;
                                fillingData.outday_unit = v.unit;
                            }
                        });
                    }
                    const data = {
                        fillingData,
                        fillingForm: this.fillingForm,
                        parameter: this.parameter,
                    };
                    if (this.is_details) {
                        data.fillingData.gdid = data.parameter.gdid;
                        data.fillingData.id = data.fillingForm.id;
                        data.fillingData.cost_title =
                            data.fillingForm.cost_title;
                        data.fillingData.price = this.getTotal;
                        const editData = {
                            allCount: 0,
                            customerid: this.customerid,
                            gdid: data.parameter.gdid,
                            spec_unit_ls: [data.fillingData],
                            totalMoney: 0,
                            txt: data.fillingData.txt,
                            type: "1",
                        };
                        this.$emit("editData", editData);
                    } else {
                        this.$emit("fillingData", data);
                    }
                }
            });
        },
        // 切换价格
        selectPriceFun(val) {
            if (val == 0) {
                this.fillingForm.price = this.priceData.price_pre.price;
            } else {
                if (this.priceData.price_ls) {
                    this.priceData.price_ls.map((v) => {
                        if (v.price_i == val) {
                            this.fillingForm.price = v.price || "";
                        }
                    });
                }
            }
        },
        // 切换成本
        selectCostFun(val) {
            if (this.porjectData.cost_ls) {
                this.porjectData.cost_ls.map((v) => {
                    if (v.id == val) {
                        this.fillingForm.cost = v.price_txt;
                    }
                });
            }
        },
        // 处理上次的价格
        setlastPrice() {
            if (
                this.priceData.gd_price[0].psort == 0 &&
                this.priceData.price_pre
            ) {
                this.fillingForm.price_type = this.priceData.gd_price[0].psort;
            } else {
                if (this.priceData.gd_price) {
                    this.priceData.gd_price.map((v, i) => {
                        if (v.psort == 0) {
                            this.priceData.gd_price.splice(i, 1);
                        }
                    });
                    this.priceData.gd_price.map((v, i) => {
                        if (v.isod == 1) {
                            this.fillingForm.price_type = v.psort;
                        }
                    });
                }
                if (this.priceData.price_ls) {
                    this.priceData.price_ls.map((v) => {
                        v.price = parseFloat(v.price).toFixed(2);
                        if (v.price_i == this.fillingForm.price_type) {
                            this.fillingForm.price = v.price;
                        }
                    });
                }
            }
        },
        // 处理表单默认信息
        setbufForm() {
            if (this.porjectData.outday_ls && !this.is_details) {
                this.porjectData.outday_ls.map((v) => {
                    if (v.is_od == 1) {
                        this.fillingForm.outday = v.id;
                    }
                });
            }
            if (this.porjectData.cost_ls) {
                let arr = [];
                this.porjectData.cost_ls.map((v) => {
                    if (v.isod == 1) {
                        this.fillingForm.cost_title = v.title;
                        this.fillingForm.cost = parseFloat(v.price_txt).toFixed(
                            2
                        );
                    }
                    if (v.status == 1) {
                        v.price_txt = parseFloat(v.price_txt).toFixed(2);
                        arr.push(v);
                    }
                });
                this.porjectData.cost_ls = arr;
            }
        },
        // 获取价格信息
        async getPriceinfo() {
            let url = config.YY_ORDER_GD_PRICE;
            let param = {
                type_od: "1",
                gdid: this.parameter.id || this.parameter.gdid,
                customerid: this.customerid || "",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.priceData = res.data;
                this.setlastPrice();
            }
        },
        // 获取服务详情
        async getprojectinfo() {
            let url = config.YY_GOODSINFO_GOODS_DETAIL;
            let param = {
                gdid: this.parameter.id || this.parameter.gdid,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.porjectData = res.data.gd_info;
                this.setbufForm();
            }
        },
        // 清除数据
        emptyData() {
            this.fillingForm = {
                price_type: "",
                price: "",
                discount_r: "100",
                cost_title: "",
                cost: "",
                txt: "",
                outday: "",
                number: "1",
            };
        },
        // 随机数
        getRandomSixDigit() {
            let code = "";
            for (var i = 0; i < 6; i++) {
                code += parseInt(Math.random() * 10);
            }
            return code;
        },
    },
};
</script>

<style lang="scss">
.pop-project-filling {
    min-height: 400px;
    .dialog-footer {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .num {
            font-size: 14px;
            span {
                margin-right: 10px;
            }
        }
    }
    .project-info {
        display: flex;
        padding-bottom: 10px;
        border-bottom: 1px #f2f2f2 solid;
        margin-bottom: 10px;
        &.price-pre {
            font-size: 12px;
        }

        .img-box {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            border-radius: 5px;
            background: #eaeaea;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            span {
                font-size: 16px;
                font-weight: bold;
            }
        }
        .info-box {
            .title {
                font-size: 14px;
            }
            .phone {
                width: 400px;
                font-size: 12px;
                color: #9c9a9a;
                margin: 5px 0;
                span {
                    margin-right: 10px;
                }
            }
            .tiem {
                width: 100%;
                font-size: 12px;
                color: #fa4848;
                .qty {
                    padding: 0 10px;
                    background: #3388ff;
                    color: #fff;
                    font-size: 12px;
                    margin-left: 10px;
                }
            }
        }
    }
    .form-box {
        .flx-box {
            display: flex;
            .unit {
                margin-left: 10px;
                margin-top: 8px;
            }
            .width-left {
                width: 135px;
                margin-right: 10px;
                &.title {
                    margin-top: 8px;
                    // text-align: right;
                }
            }
        }
        .select-w {
            width: 100%;
        }
        .form-item {
            width: calc(80% - 135px);
        }
    }
}
</style>